<template>
  <div class="detail">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <div class="detail-top">
          <el-card class="box-card">
            <div class="commodity">
              <el-row>
                <el-col :span="8">
                  <div class="commodity-img">
                    <div class="min">
                      <el-image
                        style="width: 348px; height: 348px"
                        :src="category.imgUrl"
                        fit="cover"></el-image>
                      <div class="fd"></div>
                    </div>
                    <div class="max">
                      <img :src="category.imgUrl"/>
                    </div>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="commodity-detail">
                    <div class="comm-intro">
                      <h2>{{category.cname}}</h2>
                      <div class="block star">
                        <el-rate v-model="category.star" disabled></el-rate>
                      </div>
                      <div class="comm-price">
                        {{`￥`+category.price}}
                      </div>
                    </div>
                    <div class="comm-parameter">
                      <div><span class="parameter-item">品牌：</span>{{category.brand}}</div>
                      <div><span class="parameter-item">型号：</span>{{category.model}}</div>
                      <div><span class="parameter-item">商品库存：</span>{{category.count}}件</div>
                    </div>
                    <div class="comm-bar">
                      <el-input-number v-model="num" :step="1" step-strictly :min="1"></el-input-number>

                      <el-button class="cartShop" type="danger" icon="el-icon-shopping-cart-2" @click="addCart(category.id)">加入购物车</el-button>
                      <el-button class="cartCol" icon="el-icon-star-on" @click="addCollection(category.id)"></el-button>

                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <div class="detail-second">
          <el-card class="box-card">
            <el-tabs type="card">
              <el-tab-pane label="商品详情">
                <div class="second-detail">
                  <p>
                    {{category.detail}}</p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="商品评价">
                <div v-if="listFlag===0" style="text-align: center">
                  <i class="el-icon-warning"></i>暂无评论!
                </div>
                <div v-else class="comment" v-for="(item,index) in commentList" :key="index">
                  <div class="comment-info">
                    <el-avatar size="medium" icon="el-icon-user-solid" style="margin-right: 10px"></el-avatar>
                    {{ item.name}}
                  </div>
                  <div class="comment-content">{{item.content}}</div>
                </div>
                <div>
                  <el-form ref="form" :model="commentForm" label-width="80px">
                    <el-form-item label="发表评论">
                      <el-input type="textarea" rows="4" v-model="commentForm.content"></el-input>
                    </el-form-item>
                    <el-form-item label="评分" class="comment-rate">
                      <el-rate class="rate-info" v-model="rate"></el-rate>
                    </el-form-item>
                  </el-form>
                  <el-button type="primary" @click="createComment">发布</el-button>
                </div>

              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import * as categoryRequest from '../../assets/category/detail';
  import * as commentRequest from '../../assets/comment/comment';
  import topBar from '~/components/topBar.vue'
  import * as CartRequest from "../../assets/cart/cart";
  import * as CollectionRequest from "../../assets/collection/collection";

  export default {
    name: "detail",
    components: {
      topBar
    },
    data() {
      return {
        commentForm: {
          content: ''
        },
        listFlag: 0,
        commentList: [],
        category: {},
        categoryId: 0,
        rate: null,
        num: 1,
        username: '张三',
        commentContent: '张三',
      }
    },
    methods: {
      createComment() {
        commentRequest.createComment(this)
      },
      addCollection(commodityId){
        CollectionRequest.addCommodity(this,commodityId)
      },
      addCart(commodityId){
        let cartData ={
          cartId: this.$store.state.cartId,
          commodityId: commodityId,
          count: 1,
        }
        CartRequest.addCart(this,cartData);
      },
      handleChange() {

      },
      imgMax() {
        let min = document.querySelector(".min");
        let max = document.querySelector(".max");
        let img = document.querySelector(".max img");
        let fd = document.querySelector(".fd");

        max.style.left = min.offsetLeft + min.clientWidth + 'px';
        min.onmouseover = function () {
//                1.鼠标覆盖显示max和fd
          max.style.display = "block";
          fd.style.display = "block";

        }
        //            离开时隐藏
        min.onmouseout = function () {
          max.style.display = "none";
          fd.style.display = "none";
        }
        //            2. fd的移动范围
        min.onmousemove = function () {
//                鼠标触摸的点
          let x = event.clientX - min.clientWidth - fd.offsetWidth / 2;
          let y = event.clientY - (min.offsetTop + 157) - fd.offsetHeight / 2;
//                最大移动距离
          let maxX = min.clientWidth - fd.offsetWidth;
          let maxY = min.clientHeight - fd.offsetHeight;
//                边界判断
          if (x <= 0) {
            x = 0;
          } else if (x >= maxX) {
            x = maxX;
          }
          if (y <= 0) {
            y = 0;
          } else if (y >= maxY) {
            y = maxY;
          }
//                fd的位置
          fd.style.left = x + 'px';
          fd.style.top = y + 'px';
          //fd/min = max/img
          //移动比例
          let moveX = x / maxX;
          let moveY = y / maxY;
//                移动
//                3. max的对应显示
//                对于大图而言,放大镜在小图上移动的比例相当于img在可显示区域上移动的比例
//                放大镜右移等于图片左移
//                也就是本质上为img-max 然而而需要负值,则*-1简化后为max-img
          img.style.left = moveX * (max.clientWidth - img.offsetWidth) + 'px';
          img.style.top = moveY * (max.clientHeight - img.offsetHeight) + 'px';
        }
      }
    },
    async mounted() {
      this.imgMax()
      this.categoryId = this.$route.query.category;
      await categoryRequest.getCategoryDetail(this)
      await commentRequest.getComment(this)


    }
  }

</script>
<style lang="less">
  .detail {
    .commodity {
      .commodity-img {
        position: relative;
        /* 图片容器 */

        .min {
          width: 350px;
          height: 350px;
          border: 1px solid black;
          float: left;
          position: relative;

        }

        .max {
          width: 350px;
          height: 350px;
          border: 1px solid black;
          float: left;
          display: none;
          overflow: hidden;
          position: absolute;
          margin-left: 20px;
          left: 0;
          z-index: 99;
        }

        .max img {
          position: absolute;
          margin: 0 auto;
        }

        .fd {
          width: 153.125px;
          height: 153.125px;
          background-color: skyblue;
          opacity: 0.3;
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          cursor: move;
        }
      }

      .commodity-detail {
        padding: 10px 40px;

        .comm-intro {
          .star {
            margin: 10px 0;
          }

          .comm-price {
            font-size: 2em;
            font-weight: bolder;
            color: red;
          }
        }

        .comm-parameter {
          margin: 15px 0;
          padding: 20px 0;
          border-bottom: 1px solid #ddd;
          border-top: 1px solid #ddd;

          .parameter-item {
            color: #909399;
            display: inline-block;
            width: 100px;
          }
        }

        .comm-bar {

          .cartShop {
            height: 40px;
            padding: 8px 10px;
            margin: 0;
          }

          .cartCol {
            padding: 5px 10px;
            height: 40px;

            i {
              font-size: 20px;
            }
          }


        }
      }
    }

    .detail-second {
      .el-tab-pane {
        padding: 20px;
        border: 1px solid #ddd;
      }

      .second-detail {
        font-size: 10px;
      }

      .comment {
        .comment-info {
          display: flex;
          align-items: center;
        }

        .comment-content {
          margin-left: 30px;
        }
      }

      .comment-rate {
        display: flex;
        align-items: center;

        .rate-info {
          margin-left: -80px !important;
        }
      }
    }
  }
</style>
